<template>
    <div>
        <table-title-bar v-on:add="onAdd"
                         ref="bar"
                         loading="loading"></table-title-bar>
        <!-- 日志列表 -->
        <el-table :data="tableData"
                  style="width: 100%"
                  highlight-current-row
                  @row-dblclick="dbclick">
            <el-table-column prop="summary"
                             label="Summary"></el-table-column>
            <el-table-column prop="user"
                             label="Account"></el-table-column>
            <el-table-column prop="day"
                             label="Day"></el-table-column>
            <el-table-column prop=""
                             label="Operation">
                <template scope="scope">
                    <el-button type="text"
                               size="small"
                               @click="onLogEdit(scope.row)">Edit</el-button>
                    <el-button type="text"
                               size="small"
                               @click="onLogDetail(scope.row.content)">View</el-button>
                    <el-button type="text"
                               size="small"
                               @click="onLogDelete(scope.row)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 日志查看 -->
        <el-dialog title="Log View"
                   :visible="logViewVisiable">
            <el-card class="box-card">
                <span v-html="compiledMarkdown"></span>
            </el-card>
            <span slot="footer"
                  class="dialog-footer">
                <el-button type="danger"
                           @click="logViewVisiable = false">Close</el-button>
            </span>
        </el-dialog>
        <!-- 日志编辑 -->
        <log-edit v-on:refresh="loadLogs"
                  ref="logEditor"></log-edit>
    </div>
</template>
<script>
    import {
        markdown
    } from 'markdown'
    import LogEdit from './logEdit.vue'
    import tableTitleBar from './tableTitleBar.vue'
    export default {
        components: { LogEdit, tableTitleBar },
        data () {
            return {
                loading: false,
                tableData: [],
                logDialogVisable: false,
                logViewVisiable: false,
                logContent: '',
                logForm: {
                    summary: '',
                    content: '',
                    day: ''
                },
                datePickerOpt: {
                    shortcuts: [{
                        text: 'Today',
                        onClick (picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: 'Yestoday',
                        onClick (picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: 'A Week Ago',
                        onClick (picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                }
            }
        },
        methods: {
            onAdd () {
                this.$refs.logEditor.form.id = ''
                this.$refs.logEditor.form.summary = ''
                this.$refs.logEditor.form.content = ''
                this.$refs.logEditor.form.day = ''
                this.$refs.logEditor.datePickerOpt = this.datePickerOpt
                this.$refs.logEditor.dialogVisiable = true
            },
            onLogEdit (row) {
                this.$refs.logEditor.form.id = row._id.$oid
                this.$refs.logEditor.form.summary = row.summary
                this.$refs.logEditor.form.content = row.content
                this.$refs.logEditor.form.day = row.day
                this.$refs.logEditor.datePickerOpt = this.datePickerOpt
                this.$refs.logEditor.dialogVisiable = true
            },
            onLogDelete (row) {
                let url = this.$api.API_LOGS + '/' + row._id.$oid
                console.log(url)
                this.$axios.delete(url).then(res => {
                    this.loadLogs()
                }).catch(err => {
                    console.log(err)
                })
            },
            onLogDetail (content) {
                this.logContent = content
                this.logViewVisiable = true
            },
            dbclick (row, event) {
                console.log(row)
            },
            loadLogs (func) {
                let log_api = this.$api.API_LOGS
                this.$axios.get(log_api).then(res => {
                    this.tableData = res.data
                    if (func) {
                        func()
                    }
                })
            }
        },
        mounted: function () {
            this.$nextTick(() => {
                this.$refs.bar.loading = true
                this.loadLogs(() => {
                    this.$refs.bar.loading = false
                    console.log('set false for loading', this.loading)
                })
            })
        },
        computed: {
            compiledMarkdown () {
                if (this.logContent) {
                    return markdown.toHTML(this.logContent)
                }
            }
        }
    }
</script>
